
import React, { useState, useEffect } from 'react';
import { Form, Input, InputNumber, Select, Switch, Button, message, Upload } from 'antd';
import { UploadOutlined } from '@ant-design/icons';

const { Option } = Select;
const { TextArea } = Input;

const VipLevelEdit = ({ initialValues, onSubmit }) => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);

  // 初始化表单值
  useEffect(() => {
    if (initialValues) {
      form.setFieldsValue(initialValues);
    }
  }, [initialValues, form]);

  const onFinish = async (values) => {
    try {
      setLoading(true);
      await onSubmit(values);
      message.success('保存成功');
    } catch (error) {
      message.error('保存失败: ' + error.message);
    } finally {
      setLoading(false);
    }
  };

  const normFile = (e) => {
    if (Array.isArray(e)) {
      return e;
    }
    return e?.fileList;
  };

  return (
    <div style={{ maxWidth: 800, margin: '0 auto' }}>
      <Form
        form={form}
        layout="vertical"
        onFinish={onFinish}
        initialValues={{
          isDefault: false,
          freeShipping: false,
          pointMultiplier: 1,
          vipDiscountType: '百分比',
          vipDiscountValueType: '百分比',
        }}
      >
        {/* 基础信息 */}
        <Form.Item
          label="等级名称"
          name="levelName"
          rules={[{ required: true, message: '请输入等级名称' }]}
        >
          <Input placeholder="例如：黄金会员" />
        </Form.Item>

        <Form.Item
          label="等级编码"
          name="levelCode"
          rules={[{ required: true, message: '请输入等级编码' }]}
        >
          <InputNumber min={1} max={10} style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="等级图标"
          name="levelIcon"
          valuePropName="fileList"
          getValueFromEvent={normFile}
        >
          <Upload name="logo" listType="picture">
            <Button icon={<UploadOutlined />}>上传图标</Button>
          </Upload>
        </Form.Item>

        {/* 折扣设置 */}
        <Form.Item
          label="基础折扣类型"
          name="vipDiscountType"
          rules={[{ required: true }]}
        >
          <Select>
            <Option value="百分比">百分比</Option>
            <Option value="折扣">折扣</Option>
          </Select>
        </Form.Item>

        <Form.Item
          label="基础折扣率"
          name="vipDiscount"
          rules={[{ required: true, message: '请输入基础折扣率' }]}
        >
          <InputNumber min={0} max={100} step={0.1} style={{ width: '100%' }} />
        </Form.Item>

        {/* 升级条件 */}
        <Form.Item
          label="升级条件(积分/金额)"
          name="upgradeCondition"
        >
          <InputNumber min={0} style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="有效期(天)"
          name="validityPeriod"
        >
          <InputNumber min={0} style={{ width: '100%' }} />
        </Form.Item>

        {/* 权益设置 */}
        <Form.Item
          label="是否默认等级"
          name="isDefault"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>

        <Form.Item
          label="免运费"
          name="freeShipping"
          valuePropName="checked"
        >
          <Switch />
        </Form.Item>

        <Form.Item
          label="积分倍数"
          name="pointMultiplier"
        >
          <InputNumber min={0} step={0.1} style={{ width: '100%' }} />
        </Form.Item>

        <Form.Item
          label="等级特权描述"
          name="description"
        >
          <TextArea rows={4} placeholder="例如：享受专属客服、生日礼包等特权" />
        </Form.Item>

        <Form.Item>
          <Button type="primary" htmlType="submit" loading={loading}>
            保存
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default VipLevelEdit;
